<!DOCTYPE HTML>
<html>

<head>
   <title>运费模版管理</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css">
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <!--area-->
   <link href="../../../assets/tools/multareaselect/areaselect.css" type="text/css" rel="stylesheet">

</head>

<body>
   <div class="container">
      <div class="detail-page">
         <div class="detail-page-title">
            <h4>运费模板
               <button type="button" id="user-list-btn" class="pull-right jx-btn ">返回</button>
            </h4>
         </div>
         <div class="detail-section">
            <div class=" detail-row">
               <form id="J_Form" class="form-horizontal jx-form">
                  <div class="row">
                     <div class="control-group ">
                        <label class="control-label">
                             <s>*</s>模板名称：</label>
                        <div class="controls">
                           <input name="b" type="text" data-rules="{required:true}" class="input-normal control-text">
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="control-group ">
                        <label class="control-label">
                             <s>*</s>计费方式：</label>
                        <div class="controls" style="margin-top:3px">
                           <label>
                            <input id="" name="caltype" checked type="radio" value="1">按件数</label>
                           <label>
                            <input id="" name="caltype" type="radio" value="2">按重量</label>
                        </div>

                     </div>
                  </div>
                  <div class="row">
                     <div class="control-group ">
                        <label class="control-label">配送区域：</label>
                        <div class="controls span24">
                           <table id="freight-table" class="freight-table jx-table table-bordered">
                              <thead>
                                 
                                 <tr>
                                    <td class="type1"> 可配送区域</td>
                                    <td class="type1" > 首件（个）</td>
                                    <td class="type1" > 运费（元） </td>
                                    <td class="type1" > 续件（个）</td>
                                    <td class="type1" > 续费（元）</td>
                                    <td class="type2"  style="display:none"> 可配送区域</td>
                                    <td class="type2"  style="display:none"> 首重（Kg） </td>
                                    <td class="type2"  style="display:none"> 运费（元） </td>
                                    <td class="type2"  style="display:none"> 续重（Kg）</td>
                                    <td class="type2"  style="display:none"> 续费（元）</td>
                                 </tr>
                              </thead>
                              <tbody>
                                 <!--<tr>
                                    <td class="td-area">
                                       <input type="text" class="area-duoxuan" value="" data-areacode="" style="display:none" />
                                       <span class="text">
                                       </span>
                                       <div class="pull-right operate" style="display:none">
                                          <a href="javascript:;" class="js-edit-cost-item">编辑</a>
                                          <a href="javascript:;" class="js-delete-cost-item">删除</a>
                                       </div>
                                    </td>
                                    <td> <input class="input-medium" type="text"></td>
                                    <td> <input class="input-medium" type="text"></td>
                                    <td> <input class="input-medium" type="text"></td>
                                    <td> <input class="input-medium" type="text"></td>
                                 </tr>-->

                              </tbody>
                              <tfoot class="js-freight-tablefoot">
                                 <tr>
                                    <td colspan="5"><a href="javascript:;" class="js-assign-cost">指定可配送区域和运费</a></td>
                                 </tr>
                              </tfoot>
                           </table>
                        </div>
                     </div>
                  </div>
                  <!--<table cellspacing="0" class="small-table table table-bordered">
                        <thead>
                           <tr>
                              <th>目的地 操作 </th>
                              <th>订单金额满 </th>
                              <th>运费(批量下单 元/件) </th>
                              <th>运费(分销下单 元/单) </th>
                              <th>操作 </th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>全国</td>
                              <td>
                                 <input value="1" type="text">
                              </td>
                              <td>
                                 <input value="1" type="text">
                              </td>
                              <td>
                                 <input value="1" type="text">
                              </td>
                              <td>
                                 默认
                              </td>
                           </tr>
                        </tbody>
                     </table>-->
                  <!-- 表格 start-->
                  <div id="grid"></div>
                  <!-- 表格 end-->
                  <div class="row" >
                     <div class="span3 offset3">
                        <button class="jx-btn btn-default btn-xlarge btn-block">保存</button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>

   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <!--area-->
   <script type="text/javascript" src="../../../assets/tools/multareaselect/City_data.js"></script>
   <script type="text/javascript" src="../../../assets/tools/multareaselect/areadata.js"></script>

   <script type="text/javascript">
      $(document).on("click", ".js-assign-cost", function () {
         var str = '<tr>' +
            '           <td class="td-area">' +
            '              <input type="text" name="areaselect" class="area-duoxuan" value="" data-areacode="" style="display:none">' +
            '              <span class="text">' +
            '              </span>' +
            '              <div class="pull-right operate" >' +
            '                  <a href="javascript:;" class="js-edit-cost-item">编辑</a>' +
            '                  <a href="javascript:;" class="js-delete-cost-item">删除</a>' +
            '              </div>' +
            '          </td>' +
            '          <td> <input class="input-medium bui-form-field" type="text" aria-disabled="false"></td>' +
            '          <td> <input class="input-medium bui-form-field" type="text" aria-disabled="false"></td>' +
            '          <td> <input class="input-medium bui-form-field" type="text" aria-disabled="false"></td>' +
            '          <td> <input class="input-medium bui-form-field" type="text" aria-disabled="false"></td>' +
            '      </tr>'
         $("#freight-table tbody").append(str);
         //触发选择
         $("#freight-table tbody tr:last-child").find('.td-area input').trigger("click");
      });
      //点击编辑城市
      $(document).on("click", ".js-edit-cost-item", function () {
         $(this).parent().parent().find("input").trigger("click");
      });
      //点击删除
      $(document).on("click", ".js-delete-cost-item", function () {
         $(this).parents("tr").remove();
      });
      //选择计算方式
      $(document).on("change", "input[name='caltype']:radio", function () {
         var index = $(this).val();

         $(".type1,.type2").css("display", "none");
         $(".type" + index).css("display", "table-cell");
      });
   </script>
   <script type="text/javascript">
      $("#close-page").click(function () {
         top.topManager.closePage();
      });
      Form = BUI.Form;
      var form = new Form.HForm({
         srcNode: '#form'
      }).render();
   </script>
   <!-- script start -->
   <!--<script type="text/javascript">
      BUI.use(['bui/grid', 'bui/data', 'common/search', 'bui/tree', 'bui/mask', 'bui/form'], function (Grid, Data,
         Search, Tree, Mask, Form) {
         var Grid = Grid,
            Store = Data.Store,
            columns = [{
               title: '目的地',
               dataIndex: 'a',
               elCls: 'center', //居中
               width: 200,
               editor: {
                  xtype: 'text'
               }
            }, {
               title: ' 订单金额满',
               elCls: 'center',
               dataIndex: 'b',
               width: 200
            }, {
               title: '运费(批量下单 元/件) ',
               elCls: 'center',
               dataIndex: 'c',
               width: 200,

            }, {
               title: '运费(分销下单 元/单)',
               elCls: 'center',
               dataIndex: 'd',
               width: 200,

            }, {
               title: '操作',
               dataIndex: 'f',
               elCls: 'center',
               width: 200,
               renderer: function () {
                  return '<span class="grid-command btn-edit"><i class="icon icon-edit"></i>[ 编辑 ]</span><span class="grid-command btn-del"><i class="icon icon-trash"></i> [ 删除 ]</span>'
               }
            }],
            data = [];

         new Form.Form({
            srcNode: '#J_Form'
         }).render();
         //数据缓冲类
         var treestore = new Data.TreeStore({
            proxy: {
               url: 'http://lp.taobao.com/go/rgn/citydistrictdata.php',
               dataType: 'jsonp'
            },
            map: {
               isleaf: 'leaf',
               value: 'text'
            },
            autoLoad: true
         });

         var tree = new Tree.TreeList({
            elCls: 'city-menu',
            render: '#t1',
            showLine: true,
            height: 300,
            checkType: 'all', //checkType:勾选模式，提供了4中，all,onlyLeaf,none,custom
            cascadeCheckd: true, //级联勾选
            loadMask: new Mask.LoadMask({
               el: '#t1'
            }),
            store: treestore,

            multipleCheck: true
         });
         tree.render();


         tree.on('itemclick', function (ev) {
            var item = ev.item;
            $('.log').text(item.path);
         });
         //初始化数据

         var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
               contentId: 'content', //设置隐藏的Dialog内容
               triggerCls: 'btn-edit', //触发显示Dialog的样式
               editor: {
                  title: '编辑'
               }

            }),
            store = new Store({ //初始化数据
               data: data,
               autoLoad: true, //自动加载数据
               pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
               render: '#grid',
               elCls: 'small-bui-grid-table',
               columns: columns,
               loadMask: true, //加载数据时显示屏蔽层
               forceFit: true,
               tbar: { //添加、删除

                  items: [{
                     btnCls: 'button button-small',
                     text: '添加指定地区',
                     listeners: {
                        'click': addFunction
                     }
                  }]
               },
               // 底部工具栏
               bbar: {
                  // pagingBar:表明包含分页栏
                  pagingBar: true
               },
               plugins: [editing], //插件
               store: store
            });

         grid.render();
         //点击操作
         grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
               itemEl = $(ev.element),
               item = ev.item;

            if (sender.hasClass('btn-del')) { //点击删除操作
               delFunction(item, itemEl);

            } else if (sender.hasClass('btn-edit')) {
               addFunction(item, itemEl);
            }

         });
         //添加记录
         function addFunction() {
            var newData = {};
            editing.add(newData, 'a'); //添加记录后，直接编辑
         }

         //没有多选插件，删除选中的记录
         function delFunction(item, itemEl) {
            BUI.Message.Confirm('确认删除记录？', function () {
               var input = itemEl.find('input'),
                  name = itemEl.attr('name');
               if (name) {
                  form.getField(name).remove();
               }

               store.remove(item);
            }, 'question');
         }


      });
   </script>-->
   <!-- script end -->

   <body>

</html>